<template>
  <div class="key-information-wrapper">
    <main>
      <!-- 温度信息 -->
      <el-card class="card-wraper">
        <h3 style="color: #1e40af; background: rgba(239, 246, 255, 0.7)">
          <svg-icon icon-class="dashboard-1"></svg-icon>
          温度信息
        </h3>
        <el-card class="card-wraper-item">
          <div class="card-wraper-item-top">
            <div>最高温度</div>
            <div
              class="card-wraper-item-top-icon"
              style="background: linear-gradient(135deg, #1e40af, #3b82f6)"
            >
              <svg-icon icon-class="dashboard-1" style="fill: #fff"></svg-icon>
            </div>
          </div>
          <div class="card-wraper-item-mid">
            <h3>
              25.2℃
              <!-- <span class="down"><i class="el-icon-bottom"></i> 2.1℃</span> -->
              <span class="up"><i class="el-icon-top"></i> 2.1℃</span>
            </h3>
          </div>
          <div class="card-wraper-item-btm">
            <div>较昨日</div>

            <!-- <div class="down"><i class="el-icon-bottom"></i> 2.1℃</div> -->
            <div class="up"><i class="el-icon-top"></i> 2.1℃</div>
          </div>
        </el-card>
        <el-card class="card-wraper-item">
          <div class="card-wraper-item-top">
            <div>最低温度</div>
            <div
              class="card-wraper-item-top-icon"
              style="background: linear-gradient(135deg, #6366f1, #818cf8)"
            >
              <svg-icon icon-class="dashboard-1" style="fill: #fff"></svg-icon>
            </div>
          </div>
          <div class="card-wraper-item-mid">
            <h3>
              25.2℃
              <span class="down"><i class="el-icon-bottom"></i> 2.1℃</span>
              <!-- <span class="up"><i class="el-icon-top"></i> 2.1℃</span> -->
            </h3>
          </div>
          <div class="card-wraper-item-btm">
            <div>较昨日</div>

            <!-- <div class="down"><i class="el-icon-bottom"></i> 2.1℃</div> -->
            <div class="up"><i class="el-icon-top"></i> 2.1℃</div>
          </div></el-card
        >
        <el-card class="card-wraper-item">
          <div class="card-wraper-item-top">
            <div>平均温度</div>
            <div
              class="card-wraper-item-top-icon"
              style="background: linear-gradient(135deg, #f59e0b, #fbbf24)"
            >
              <svg-icon icon-class="dashboard-1" style="fill: #fff"></svg-icon>
            </div>
          </div>
          <div class="card-wraper-item-mid">
            <h3>
              25.2℃
              <!-- <span class="down"><i class="el-icon-bottom"></i> 2.1℃</span> -->
              <span class="up"><i class="el-icon-top"></i> 2.1℃</span>
            </h3>
          </div>
          <div class="card-wraper-item-btm">
            <div>较昨日</div>

            <div class="down"><i class="el-icon-bottom"></i> 2.1℃</div>
            <!-- <div class="up"><i class="el-icon-top"></i> 2.1℃</div> -->
          </div></el-card
        >
      </el-card>
      <!-- 能耗信息 -->
      <el-card class="card-wraper">
        <h3 style="color: #166534; background: rgba(240, 253, 244, 0.7)">
          <svg-icon icon-class="dashboard-9"></svg-icon>
          能耗信息
        </h3>
        <el-card class="card-wraper-item">
          <div class="card-wraper-item-top">
            <div>累计电量</div>
            <div
              class="card-wraper-item-top-icon"
              style="background: linear-gradient(135deg, #10b981, #34d399)"
            >
              <svg-icon icon-class="dashboard-4" style="fill: #fff"></svg-icon>
            </div>
          </div>
          <div class="card-wraper-item-mid">
            <h3>
              25.2℃
              <!-- <span class="down"><i class="el-icon-bottom"></i> 2.1℃</span> -->
              <span class="up"><i class="el-icon-top"></i> 2.1℃</span>
            </h3>
          </div>
          <div class="card-wraper-item-btm">
            <div>较昨日</div>

            <!-- <div class="down"><i class="el-icon-bottom"></i> 2.1℃</div> -->
            <div class="up"><i class="el-icon-top"></i> 2.1℃</div>
          </div>
        </el-card>
        <el-card class="card-wraper-item">
          <div class="card-wraper-item-top">
            <div>累计电费</div>
            <div
              class="card-wraper-item-top-icon"
              style="background: linear-gradient(135deg, #ef4444, #f87171)"
            >
              <span style="color: #fff; font-weight: bold">￥</span>
            </div>
          </div>
          <div class="card-wraper-item-mid">
            <h3>
              25.2℃
              <span class="down"><i class="el-icon-bottom"></i> 2.1℃</span>
              <!-- <span class="up"><i class="el-icon-top"></i> 2.1℃</span> -->
            </h3>
          </div>
          <div class="card-wraper-item-btm">
            <div>较昨日</div>

            <!-- <div class="down"><i class="el-icon-bottom"></i> 2.1℃</div> -->
            <div class="up"><i class="el-icon-top"></i> 2.1℃</div>
          </div></el-card
        >
        <el-card class="card-wraper-item">
          <div class="card-wraper-item-top">
            <div>累计加热时长</div>
            <div
              class="card-wraper-item-top-icon"
              style="background: linear-gradient(135deg, #6366f1, #818cf8)"
            >
              <svg-icon icon-class="dashboard-2" style="fill: #fff"></svg-icon>
            </div>
          </div>
          <div class="card-wraper-item-mid">
            <h3>
              25.2℃
              <!-- <span class="down"><i class="el-icon-bottom"></i> 2.1℃</span> -->
              <span class="up"><i class="el-icon-top"></i> 2.1℃</span>
            </h3>
          </div>
          <div class="card-wraper-item-btm">
            <div>较昨日</div>

            <div class="down"><i class="el-icon-bottom"></i> 2.1℃</div>
            <!-- <div class="up"><i class="el-icon-top"></i> 2.1℃</div> -->
          </div></el-card
        >
      </el-card>
      <!-- 电气参数 -->
      <el-card class="card-wraper">
        <h3 style="color: #6b21a8; background: rgba(250, 245, 255, 0.7)">
          <svg-icon icon-class="dashboard-4"></svg-icon>
          电气参数
        </h3>
        <el-card class="card-wraper-item">
          <div class="card-wraper-item-top">
            <div>平均功率</div>
            <div
              class="card-wraper-item-top-icon"
              style="background: linear-gradient(135deg, #10b981, #34d399)"
            >
              <svg-icon icon-class="dashboard-4" style="fill: #fff"></svg-icon>
            </div>
          </div>
          <div class="card-wraper-item-mid">
            <h3>
              25.2℃
              <!-- <span class="down"><i class="el-icon-bottom"></i> 2.1℃</span> -->
              <span class="up"><i class="el-icon-top"></i> 2.1℃</span>
            </h3>
          </div>
          <div class="card-wraper-item-btm">
            <div>较昨日</div>

            <!-- <div class="down"><i class="el-icon-bottom"></i> 2.1℃</div> -->
            <div class="up"><i class="el-icon-top"></i> 2.1℃</div>
          </div>
        </el-card>
        <el-card class="card-wraper-item">
          <div class="card-wraper-item-top">
            <div>平均电流</div>
            <div
              class="card-wraper-item-top-icon"
              style="background: linear-gradient(135deg, #f59e0b, #fbbf24)"
            >
              <svg-icon icon-class="dashboard-4" style="fill: #fff"></svg-icon>
            </div>
          </div>
          <div class="card-wraper-item-mid">
            <h3>
              25.2℃
              <span class="down"><i class="el-icon-bottom"></i> 2.1℃</span>
              <!-- <span class="up"><i class="el-icon-top"></i> 2.1℃</span> -->
            </h3>
          </div>
          <div class="card-wraper-item-btm">
            <div>较昨日</div>

            <!-- <div class="down"><i class="el-icon-bottom"></i> 2.1℃</div> -->
            <div class="up"><i class="el-icon-top"></i> 2.1℃</div>
          </div></el-card
        >
        <el-card class="card-wraper-item">
          <div class="card-wraper-item-top">
            <div>平均电压</div>
            <div
              class="card-wraper-item-top-icon"
              style="background: linear-gradient(135deg, #10b981, #34d399)"
            >
              <svg-icon icon-class="dashboard-4" style="fill: #fff"></svg-icon>
            </div>
          </div>
          <div class="card-wraper-item-mid">
            <h3>
              25.2℃
              <!-- <span class="down"><i class="el-icon-bottom"></i> 2.1℃</span> -->
              <span class="up"><i class="el-icon-top"></i> 2.1℃</span>
            </h3>
          </div>
          <div class="card-wraper-item-btm">
            <div>较昨日</div>

            <div class="down"><i class="el-icon-bottom"></i> 2.1℃</div>
            <!-- <div class="up"><i class="el-icon-top"></i> 2.1℃</div> -->
          </div></el-card
        >
      </el-card>
    </main>
  </div>
</template>
<style scoped lang="scss">
.key-information-wrapper {
  main {
    display: flex;
    justify-content: space-between;
    .card-wraper {
      width: 32%;
      h3 {
        padding: 15px;
        border-radius: 10px;
        margin: 0;
      }
      .card-wraper-item {
        margin-top: 10px;
        color: #4b5563;
      }
    }
  }
}
.card-wraper-item .card-wraper-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .card-wraper-item-top-icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
}
.card-wraper-item .card-wraper-item-mid {
  h3 {
    color: #000;
    margin: 8px 0 !important;
    padding: 0 !important;
    font-size: 24px;
    .down {
      color: #ef4444;
      font-size: 14px;
      padding-left: 5px;
    }
    .up {
      color: #10b981;
      font-size: 14px;
      padding-left: 5px;
    }
    .el-icon-top,
    .el-icon-bottom {
      font-weight: bolder;
    }
  }
}
.card-wraper-item .card-wraper-item-btm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-top: 15px;
  .down {
    color: #991b1b;
    font-size: 12px;
    padding: 3px 8px 3px 5px;
    background-color: rgba(254, 226, 226, 0.8);
    border-radius: 15px;
  }
  .up {
    color: #166534;
    font-size: 12px;
    padding: 3px 8px 3px 5px;
    background-color: rgba(222, 247, 236, 0.8);
    border-radius: 15px;
  }
}
</style>
